<template>
	<view>
		<scroll-view  scroll-y="true" style="height: 1100upx;">
			<view class="d-flex flex-row flex-wrap answer_card_con py-2">
				<block v-if="answerList.danList && answerList.danList.length > 0">
				
					<view class="quest_type_title">
						<text>1 单选题</text>
					</view>
					
					<view v-for="(item,index) in answerList.danList" :key="item.id" class="d-flex flex-column card_con_normal"
							:style="'background-color:' + (item.anFlag == '1' ? '#a9feec': '#ffffff') 
									+';border:'+ (item.curreent == '1' ? '2px solid #c3331a': '1px solid #797979') + ';'"
							 @click="selectItem(item.id, '1')">
						<view class="card_item_answer">
							<text>{{ index+1 }}</text>
						</view>
						<view style="height: 25upx;line-height: 25upx;text-align: center;">
							<image v-show="item.favor == '1' " src="../../static/icon/favor.png" style="width: 20upx;height: 20upx;"></image>
						</view>
					</view>
				</block>
				
				<block v-if="answerList.duoList && answerList.duoList.length > 0">
				
					<view class="quest_type_title">
						<text>2 多选题</text>
					</view>
					
					<view v-for="(item,index) in answerList.duoList" :key="item.id" class="d-flex flex-column card_con_normal"
							:style="'background-color:' + (item.anFlag == '1' ? '#a9feec': '#ffffff') 
									+';border:'+ (item.curreent == '1' ? '2px solid #c3331a': '1px solid #797979') + ';'"
							 @click="selectItem(item.id, '2')">
						<view class="card_item_answer">
							<text>{{ index+1 }}</text>
						</view>
						<view style="height: 25upx;line-height: 25upx;text-align: center;">
							<image v-show="item.favor == '1' " src="../../static/icon/favor.png" style="width: 20upx;height: 20upx;"></image>
						</view>
					</view>
				</block>
				
				
				<block v-if="answerList.panList && answerList.panList.length > 0">
				
					<view class="quest_type_title">
						<text>3 判断题</text>
					</view>
					
					<view v-for="(item,index) in answerList.panList" :key="item.id" class="d-flex flex-column card_con_normal"
							:style="'background-color:' + (item.anFlag == '1' ? '#a9feec': '#ffffff') 
									+';border:'+ (item.curreent == '1' ? '2px solid #c3331a': '1px solid #797979') + ';'"
							 @click="selectItem(item.id, '3')">
						<view class="card_item_answer">
							<text>{{ index+1 }}</text>
						</view>
						<view style="height: 25upx;line-height: 25upx;text-align: center;">
							<image v-show="item.favor == '1' " src="../../static/icon/favor.png" style="width: 20upx;height: 20upx;"></image>
						</view>
					</view>
				</block>
				
				<block v-if="answerList.anliList && answerList.anliList.length > 0">
				
					<view class="quest_type_title">
						<text>4 案例题</text>
					</view>
					
					<view v-for="(item,index) in answerList.anliList" :key="item.id" class="d-flex flex-column card_con_normal"
							:style="'background-color:' + (item.anFlag == '1' ? '#a9feec': '#ffffff') 
								+';border:'+ (item.curreent == '1' ? '2px solid #c3331a': '1px solid #797979') + ';'"
							 @click="selectItem(item.id, '4')">
						<view class="card_item_answer">
							<text>{{ index+1 }}</text>
						</view>
						<view style="height: 25upx;line-height: 25upx;text-align: center;">
							<image v-show="item.favor == '1' " src="../../static/icon/favor.png" style="width: 20upx;height: 20upx;"></image>
						</view>
					</view>
				</block>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:"answer_card",
		props: ['answerList'],
		data() {
			return {
				
			};
		},
		
		methods: {
			selectItem(id, type){
				this.$emit("selectEvent", {id: id, type: type})
			}
		}
	}
</script>

<style>
	.answer_card_con{
		background-color: #ffffff;padding-left:20upx;padding-top:20upx;border:1px solid #0b50f0;
	}
	
	.card_con_normal{
		width:60upx;height:70upx;margin:5upx;border: 1upx solid #797979;margin-top:20upx;
	}
	
	.quest_type_title{
		width:690upx;font-size: 30upx;font-weight: bold;color:#425ca1;
	}
	
	.card_item_answer{
		height: 45upx;line-height: 45upx;text-align: center;
	}

</style>